<template>
	<view>

		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">结算积分</block>
		</cu-custom>

		<view class="cu-list menu sm-border">
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-discoverfill text-orange"></text>
					<text class="text-grey">活动名称: {{detailObj.name}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-discoverfill text-orange"></text>
					<text class="text-grey">参与人数: {{nums}}人</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-discoverfill text-orange"></text>
					<text class="text-grey">结算积分: {{detailObj.integral}}分</text>
				</view>
			</view>
			<view class="cu-item margin-top-sm">
				<view class="content">
					<text class="cuIcon-discoverfill text-orange"></text>
					<text class="text-grey">备注: 被勾选将能够获得积分分配</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content margin-left">
					<checkbox-group class="block" @change="CheckboxChangeAll">
						<checkbox class='round' id="male" :class="checkAll?'checked':''" :checked="checkAll" value="all"></checkbox>
						<label for="male">
						<text class="text-black padding-lr">全选</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>

		<checkbox-group class="block" @change="CheckboxChange">
			<!-- #ifndef MP-ALIPAY -->
			<view class="cu-form-group" v-for="(item, index) in checkbox" :key="item.openid">
				<view class="cu-list menu sm-border" style="width: 100%;">
					<view class="cu-item">
						<view class="content">
							<checkbox class='round' :class="checkbox[index].checked?'checked':''" :checked="checkbox[index].checked?true:false"
							 :value="item.openid" :id="item.openid+index"></checkbox>
							 <label :for="item.openid+index">
							<text class="title padding-lr">{{item.name || '未填写'}} - {{item.phone || '未填写'}}</text>
							</label>
						</view>
						<view class="action">
							<view class="cu-avatar-group">
								<view class="cu-avatar round sm" :style="{
									backgroundImage: `url(${item.pic ? item.pic :
									 'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg' })`
								}"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
		</checkbox-group>
		
		<view class="padding flex flex-direction">
			<button @tap="confirmSettle" class="cu-btn bg-red margin-tb-sm lg">确认结算</button>
		</view>
		
	</view>
</template>

<script>
	const {
		request,
	} = require('@/utils/t-request.js');
	export default {
		data() {
			return {
				id: '',
				detailObj: {},
				aSign: [],
				nums: 0,
				checkbox: [],
			}
		},
		computed: {
			checkAll: {
				get: function() {
					if (this.checkbox.every(item => item.checked === true)) {
						return true
					} else {
						return false
					}
				},
				set: function(newVal, oldVal) {
					if (newVal) {
						this.checkbox = this.checkbox.map(item => {
							return { ...item,
								checked: true
							}
						})
					} else {
						this.checkbox = this.checkbox.map(item => {
							return { ...item,
								checked: false
							}
						})
					}
				}
			}
		},
		methods: {
			CheckboxChange(e) {
				let items = this.checkbox;
				let values = e.detail.value;
				// console.log(items, values)
				// (3) [{…}, {…}, {…}, __ob__: Observer] (2) ["A", "B"]
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].openid == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			CheckboxChangeAll(e) {
				if(e.detail.value.length > 0){
					this.checkAll = true;
				}else {
				this.checkAll = false;
				}
			},
			confirmSettle() {
				let arr = this.checkbox.filter(item=>item.checked===true).map(item=>item.openid)
				request({
					url: "/users/confirm-act",
					method: 'POST',
					data: {
						id: this.id,
						arr
					}
				}).then(res => {
					uni.switchTab({
						url: '/pages/home/home'
					})
				})
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		mounted() {
			request({
				// url: "/users/confirm-act",
				url: "/users/get-act-byid",
				method: 'POST',
				data: {
					id: this.id
				}
			}).then(res => {
				// uni.switchTab({
				// 	url: '/pages/home/home'
				// })
				// console.log(res)
				this.detailObj = res.data.obj;
				this.aSign = res.data.aSign;
				this.nums = res.data.nums;
				this.checkbox = res.data.signup.map(item => {
					return { ...item,
						checked: true
					}
				});
				// console.log(this.checkbox)
			})
		}
	}
</script>

<style>

</style>
